<template>
	<div class="hasNav" style="padding-top: 20px;">
	  <van-nav-bar title="疾病详情" left-text="返回" left-arrow @click-left="$router.back()" fixed />
	  <div class="detail-view">
		<div class="detail-content">
			<div class="product">
				<div class="cate-title">疾病介绍</div>
				<div class="product-content" v-html="introduction"></div>
		  	</div>
			<div class="product">
				<div class="cate-title">基本信息</div>
				<div class="product-content">
				疾病名称：<span v-html="name"></span><br>
				科室名称：<span v-html="departmentName"></span><br>
				身体部位：<span v-html="positionName"></span><br>
				发病等级：<span v-html="morbidityName"></span><br>
				</div>
		  	</div>
		  	<div class="product">
				<div class="cate-title">临床表现</div>
				<div class="product-content" v-html="symptomDescription"></div>
		  	</div>
		  	<div class="product">
				<div class="cate-title">疾病检查</div>
				<div class="product-content" v-html="checkDescription"></div>
		  	</div>
		  	<div class="product">
				<div class="cate-title">疾病治疗</div>
				<div class="product-content" v-html="treatment"></div>
		  	</div>
		  	<div class="product">
				<div class="cate-title">疾病预防</div>
				<div class="product-content" v-html="prevention"></div>
		  	</div>
		  	<div class="product">
				<div class="cate-title">并发症</div>
				<div class="product-content" v-html="concurrent"></div>
		  	</div>
			  <div class="product">
				<div class="cate-title">疾病诊断</div>
				<div class="product-content" v-html="diagnosis"></div>
		  	</div>
		  	<Loading :isShow="loading"></Loading>
		</div>
	  </div>
	</div>
  </template>
  
  <script>
  import Loading from '@/components/Loading';
  import { getDiseaseDetail } from '../../api/disease';
  export default {
	name: 'diseaseDetail',
	components: {
		Loading,
	},
	data() {
	  return {
		loading: true,
		name: '',
		departmentName: '',
		positionName: '',
		morbidityName: '',
		introduction: '',
		symptomDescription: '',
		checkDescription: '',
		treatment: '',
		prevention: '',
		concurrent: '',
		diagnosis: '',
	  }
	},
	mounted() {
		let id = this.$route.query.id;
		this.getDisease(id)
	},
	methods: {
		async getDisease(id) {
			try {
				this.loading = true;
				const { code, msg, data } = await getDiseaseDetail(id);
				if (code == 200) {
					this.name = data.name;
					this.departmentName = data.departmentName;
					this.positionName = data.positionName;
					this.morbidityName = data.morbidityName;
					this.introduction = data.introduction;
					this.symptomDescription = data.symptomDescription;
					this.checkDescription = data.checkDescription;
					this.treatment = data.treatment;
					this.prevention = data.prevention;
					this.concurrent = data.concurrent;
					this.diagnosis = data.diagnosis;
				} else {
					this.$toast(msg);
				}
				this.$nextTick(() => {
					this.loading = false;
				});
			} catch (error) {
				console.log(error);
				this.loading = false;
			}
		},
	},
  }
  </script>
  
  <style lang="scss" scoped>
  .detail-view {
	margin-bottom: 50px;
  }
  .detail-content {
	.cate-title {
	  margin: 40px 0 0 0;
	  font-size: 20px;
	  color: #333333;
	  line-height: 24px;
	  font-weight: 600;
	  position: relative;
	  padding-left: 10px;
	  &::before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		display: inline-block;
		width: 5px;
		height: 24px;
		background-color: #bf2a2f;
	  }
	}
	.product {
	  .product-content {
		margin: 10px 20px;
		line-height: 24px;
		font-size: 14px;
		letter-spacing: 0;
		color: #333333;
	  }
	}
  }
  </style>
  